<template>
  <view>
    <view class="" style="padding: 20rpx 0;">
      <picker class="selector" mode="selector" :value="index" :range="array" @change="select">
        <text>{{array[index]}}</text>
        <uni-icons size="14" type="left"></uni-icons>
      </picker>
    </view>

    <view class="nav">
      <view class="nav-head">
        <text class="title" @click="clicktitile(0)" :class="{'curr': curr==0}">个人薪资</text>
        <uni-badge :text="personCount" v-show="personCount != 0" type="error" size="normal" />

        <text v-if="usertype != 4" class="title" @click="clicktitile(1)" :class="{'curr': curr==1}">劳工薪资</text>
        <uni-badge v-if="usertype != 4" :text="laborCount" type="error" size="normal" />
      </view>


      <view class="null-box" v-if="isNullImage">
        <view class="null-image">
          <image src="/static/images/777.png" mode=""></image>
        </view>
        空空如也
      </view>

      <view class="list">

        <view class="item" v-show="curr==0" v-for="(item,index) in person_list"
          @click="gotopreson(item.id,item.affirm)">


          <view class="top">
            <uni-icons class="icon" size="18" color="#7E8FAB" type="staff-filled"></uni-icons>
            <text class="text">{{item.time}}薪资</text>
            <text class="affirm" :class="{'affirm-red': !item.affirm}">
              {{item.affirm ? "已确认" : "待确认"}}</text>
          </view>
          <view class="bottom">
            <view class="money">￥{{item.money}}</view>
            <view class="position">{{item.position}}</view>
          </view>
        </view>

        <view class="item" v-show="curr==1" v-for="(item,index) in labor_list"
          @click="Myselect(item.classifyUnitSalaryList)">
          <view class="top">
            <uni-icons class="icon" size="18" color="#7E8FAB" type="staff-filled"></uni-icons>
            <text class="text">{{item.salaryDate}}薪资</text>
            <text class="affirm" :class="{'affirm-red': !item.isConfirm}">{{item.isConfirm ?"已确认":"待确认"}}</text>
          </view>
          <view class="bottom">
            <view class="money">{{'选择分包单位'}}</view>
            <view class="position">{{item.salaryRelativeProjectName}}</view>
          </view>
        </view>


      </view>

    </view>

    <!--    aniType动画类型（13种）：fadeInAndScaleUp、slideFromRight、slideFromBottom、newspaper、fall、sideAndFall、flipH3d、flipV3d、sign3d、superScale、slit3d、rotateFromBottom3d、rotateFromLeft3d
    <kevy-mask :show="show" @click="hideMask" :contentStyle="contentStyle" :maskClose="true" :z-index="10"
      aniType="fadeInAndScaleUp">
      <view class="showImage">
        <image :src="salaryImgUrl.replace('\\','')" mode="" @click="showImage()"></image>
        <button class="mybot" v-if="!isMyButoon" @click="myConfirmed">确认</button>
      </view>
    </kevy-mask> -->

  </view>
</template>

<script>
  export default {
    data() {
      return {
        isNullImage: false, // 单独用一个变量来判断是不是要展示缺省页
        isMyButoon: true, // 是否展示查看薪资表中的确认按钮
        querenid: 0,
        onced: 0,
        allProject: [], //全部项目id名称
        //显示或隐藏遮罩
        show: false, // 遮罩层组件变量
        //内容最外层样式
        contentStyle: { // 遮罩层组件变量
          'width': '600rpx',
          'height': '400rpx',
          'border-radius': '10rpx',
          'background': '#fff'
        },
        personCard: '', //用户身份证,用来获取个人薪资的字段
        type: 'center',
        msgType: 'success',
        messageText: '这是一条成功提示',
        value: '',
        userId: 0, //用户id
        usertype: 4,
        salaryImgUrl: '', //$图片路径
        personCount: 0, // 个人薪资未确认
        laborCount: 0, // 劳工薪资未确认
        curr: 0, // 0个人薪资  1劳工薪资
        index: 0,
        selfSalaryId: [], // 本人的薪资属性的id
        array: [],
        person_list: [],
        all_person_list: [], // 用于存储原始的个人薪资数据数据
        all_labor_list: [], // 用于存储筛选后的数据
        labor_list: [], // 将全部劳工的薪资 按月分并且也要按照项目分
        salaryRelativePersonName: '', //个人薪资的名字用这个来筛选劳工薪资
        isLaborShow: false //是不是要查询劳工
      }
    },
    methods: {
      Myclose() {

      },
      showImage() {
        uni.previewImage({
          urls: [this.salaryImgUrl.replace('\\', '')]
        })
      },
      // 判断是不是要展示缺省页
      isShowNullImage() {
        // console.log(this.usertype);
        // console.log(this.all_person_list.length);
        // console.log(this.all_labor_list.length);
        console.log('-----------------------------------------');
        console.log(this.curr);
        console.log(this.usertype);
        if (this.usertype == 4) {
          // 劳工
          
          if (this.all_person_list.length == 0 && this.curr == 0) {
            this.isNullImage = true
          } else {
            this.isNullImage = false
          }
        } else {
          if (this.all_person_list.length == 0 && this.curr == 0) {
            this.isNullImage = true
            return 
          } else {
            this.isNullImage = false
            return 
          }

          if (this.all_labor_list.length == 0 && this.curr == 1) {
            this.isNullImage = true
          } else {
            this.isNullImage = false
          }

        }
      },
      // 选择了时间
      clicktitile(curr) {
        this.curr = curr
        if (curr == 0) {
          // 创建一个空数组用于存储年份
          const yearsArray = [];
          // 遍历 person_list 数组
          yearsArray.push('全部');
          this.all_person_list.forEach(person => {
            // 使用正则表达式提取年份部分
            const match = person.time.match(/\d{4}年/);
            if (match) {
              // 获取匹配到的年份部分
              const year = match[0];
              // 将年份添加到新数组中，如果尚未添加
              if (!yearsArray.includes(year)) {
                yearsArray.push(year);
              }
            }
          });
          this.array = yearsArray

          console.log('this.array', this.array);
        } else {
          this.curr = curr
          if (curr == 1) {
            // 创建一个空数组用于存储年份
            const yearsArray = [];
            // 遍历 person_list 数组
            yearsArray.push('全部');
            this.labor_list.forEach(person => {
              // 使用正则表达式提取年份部分
              // 后端改了 字段名 个人薪资和劳工薪资的时间字段不一致
              const match = person.salaryDate.match(/\d{4}年/);
              if (match) {
                // 获取匹配到的年份部分
                const year = match[0];
                // 将年份添加到新数组中，如果尚未添加  
                if (!yearsArray.includes(year)) {
                  yearsArray.push(year);
                }
              }
            });
            this.array = yearsArray
          }
        }


        this.isShowNullImage()
      },
      // 获取个人薪资
      getSalaryList(idCode) {
        uni.showLoading({
          title: '加载数据中'
        })
        uni.$post(this.path + '/salary/query', {
          isChecked: 2,
          pageNo: 0,
          pagesize: 0,
          personCard: idCode || uni.getStorageSync('userCode'), //$加了身份证号获取的为个人薪资，不加获取劳工薪资
          permissionFlag: '',
          salaryDate: '',
          roleStatus: 0
        }).then(res => {
          console.log('获取全部个人薪资信息', res);
          uni.setStorageSync('salaryArray', res.data.records)
          if (res.code != 200) {
            uni.hideLoading()
            uni.showToast({
              title: '薪资获取失败'
            })
            return
          }
          uni.hideLoading()
          // 遍历拿到的时间
          //保存个人包工头的名字
          this.salaryRelativePerson = res.data.records.salaryRelativePerson
          res.data.records.forEach(item => {
            let timearr = item.salaryDate.split('-')
            // 判斷後端的返回值是否合法
            if (item.salaryAll == null) {
              return
            }

            if (uni.getStorageSync('usertype') == 3) {
              // 判断有几条数据没有验证
              if (item.is_checked != 3) {
                this.personCount += 1
              }
            } else if (uni.getStorageSync('usertype') == 4) {
              // 判断有几条数据没有验证
              if (item.is_checked != 6) {
                this.personCount += 1
              }
            }

            if (uni.getStorageSync('usertype') == 3) {
              // 判断有几条数据没有验证
              if (item.is_checked != 3) {
                this.personCount += 1
              }
            } else if (uni.getStorageSync('usertype') == 4) {
              // 判断有几条数据没有验证
              if (item.is_checked != 6) {
                this.personCount += 1
              }
            }

            // 往列表中添加数据
            this.person_list.push({
              id: item.id,
              time: timearr[0] + '年' + timearr[1] + '月',
              money: parseFloat(item.salaryAll).toFixed(2),
              position: item.salaryWhere,
              affirm: item.isChecked == 6 //1就是已确认 0就是未确认//$无论任何角色只有3才是已确认
            })
          })

          // 保存筛选之前的 全部数据 后面this.person_list要筛选
          this.all_person_list = this.person_list
          // 模拟点击了个人薪资选项 所有的薪资年月做去重筛选
          this.clicktitile(0)
          // console.log('all_person_list', this.all_person_list);


        })

      },
      //$获取劳工薪资
      getlaborSalary() {
        this.curr = 1
        this.labor_list = []
        uni.showLoading({
          title: '加载数据中'
        })
        console.log('获取劳工薪资之前salaryRelativePersonName ', this.salaryRelativePersonName);
        uni.$get(this.path + '/salary/getCommonWorkerSalaryList').then(res => {
          console.log('获取全部劳工薪资信息', res);
          if (res.code != 200) {
            uni.hideLoading()
            uni.showToast({
              title: '劳工薪资获取失败'
            })
            return
          }
          uni.hideLoading()
          // 遍历拿到的时间
          console.log('laborlist', res.data);
          res.data.forEach(item => {
            let timearr = item.salaryDate.split('-')

            // 判断有几条数据没有验证
            if (item.isConfirm == false) {
              this.laborCount += 1
            }
            // classifyUnitSalaryList
            // : 
            // (4) [{…}, {…}, {…}, {…}]
            // isConfirm
            // : 
            // false
            // salaryDate
            // : 
            // "2023-10-01"
            // salaryRelativeProjectName
            // : 
            // "项目2"
            this.labor_list.push({
              classifyUnitSalaryList: item.classifyUnitSalaryList,
              salaryRelativeProjectName: item.salaryRelativeProjectName,
              salaryDate: timearr[0] + '年' + timearr[1] + '月',
              salaryRelativeProjectName: item.salaryRelativeProjectName,
              isConfirm: item.isConfirm
            })
          })

          // // 往列表中添加数据 假数据
          // this.labor_list.push({
          //   id: 1,
          //   time: '2023-11-11',
          //   money: '9999999',
          //   position: '假数据',
          //   affirm: false //1就是已确认 0就是未确认
          // })
          // 保存筛选之前的 全部数据 
          this.all_labor_list = this.labor_list
          // 模拟点击了劳工薪资选项 所有的薪资年月做去重筛选
          this.once = 1
          console.log('all_labor_list', this.all_labor_list);
        })

        this.isShowNullImage()
      },
      // 点击展示覆盖层
      Myselect(val) {
        uni.setStorageSync('labourSalary', val)
        uni.navigateTo({
          url: '../../../subpkg/selectSubpackage'
        })
        return
        console.log('val', val);
        this.isMyButoon = val.affirm
        this.showMask()
        uni.showLoading({
          title: '加载中......'
        })
        let tampTime = val.time.replace('年', '-').replace('月', '-') + '01'
        uni.$post(this.path + '/salary/toPic', { //$获取表格图片
          id: id,
          isChecked: 1,
          name: "",
          orderBy: "",
          pageNo: 0,
          pageSize: 0,
          permissionFlag: "",
          personCard: "",
          personGroup: 0,
          relativeProjectId: 0,
          returnFields: "",
          salaryDate: tampTime,
          startTime: "",
          startTimeStr: "",
          roleStatus: 1
        }).then(res => {
          if (res.code == 200) {
            uni.hideLoading()
            this.salaryImgUrl = res.data
            this.querenid = id
          } else { //$失败
            uni.hideLoading()
            uni.showToast({
              title: '加载失败,请重试!',
              icon: 'none',
              duration: 1000
            })
            setTimeout(() => {
              uni.hideMask()
            }, 1000)
          }
        })

      },
      // 选择年份数据 然后去筛选 要展示的列表数据
      select(e) {
        // 拿到选择的下标
        this.index = e.detail.value;
        // 当前选择的是个人薪资
        if (this.curr === 0) {
          // 如果选择是全部 那就直接展示全部
          console.log('all_person_list', this.all_person_list);
          if (this.array[e.detail.value] == '全部') {
            this.person_list = this.all_person_list
            return
          }
          const tamparr = [];
          // 将全部数据赋值给当前的展示的list
          this.person_list = this.all_person_list
          // 遍历当前的list 如果list的time中出现我选择的时间就加到 tamparr数组中
          this.person_list.forEach(item => {
            if (item.time.indexOf(this.array[e.detail.value]) != -1) {
              tamparr.push(item);
            }
          });
          this.person_list = tamparr; // 存储筛选后的结果
        }

        if (this.curr === 1) { //$复制粘贴上方
          // 如果选择是全部 那就直接展示全部
          console.log('all_labor_list', this.all_labor_list);
          if (this.array[e.detail.value] == '全部') {
            this.labor_list = this.all_labor_list
            return
          }
          const tamparr = [];
          // 将全部数据赋值给当前的展示的list
          this.labor_list = this.all_labor_list
          // 遍历当前的list 如果list的time中出现我选择的时间就加到 tamparr数组中
          this.labor_list.forEach(item => {
            if (item.time.indexOf(this.array[e.detail.value]) != -1) {
              tamparr.push(item);
            }
          });
          this.labor_list = tamparr; // 存储筛选后的结果
        }

      },
      //点击进入角色薪资确认页面
      gotopreson(id, isAffirm) {
        console.log(id);
        uni.navigateTo({
          url: './salaryPage?id=' + id + '&isAffirm=' + isAffirm
        })
      },

      change(e) {
        console.log('当前模式：' + e.type + ',状态：' + e.show);
      },
      myConfirmed() {
        uni.$put(this.path + '/salary/audit', [{
          id: this.querenid,
          // isChecked: 2,
          flag: 9
          // permissionFlag: "",
          // salaryAdd: "",
          // salaryAll: "",
          // salaryBase: "",
          // salaryDate: "",
          // salaryPersonIdentityCard: "",
          // salaryRelativePerson: "",
          // salaryRelativeProjectId: 0,
          // salaryRemarks": ""
        }]).then(res => {
          if (res.code == 200) {
            console.log('queren', res);
            uni.showToast({
              title: '确认成功',
              icon: 'none',
              duration: 1000
            })
            this.show = false;
          } else {
            uni.showToast({
              title: '确认失败，请重试',
              icon: 'none',
              duration: 1000
            })
            this.show = false;
          }
        })
      },
      // 下面两个方法是覆盖层的方法
      showMask() {
        this.show = true;
      },
      hideMask() {
        this.show = false;
        return

      },

    },
    onLoad(options) {
      console.log('options', options);
      this.salaryRelativePersonName = uni.getStorageSync('nickName')
      if (options.card != null) {
        // 从人员详情进入
        console.log('从人员详情进入');
        this.usertype = 4
        this.getSalaryList(options.card)
      } else {
        // 从人员详情进入
        //获取角色权限类型
        this.isLaborShow = true
        console.log('从薪资管理进入');
        this.usertype = uni.getStorageSync('usertype') // 5劳资专员-个人 4劳工 3包工头 2劳资专员-项目 1管理员
        if (this.usertype == 3)
          this.getlaborSalary()

        this.getSalaryList()

      }
    },

    created() {

      //获取用户id
      this.baseUrl = this.path
      this.userId = uni.getStorageSync('userId')
      // console.log('userId', this.userId);
      this.personCard = uni.getStorageSync('userCode')
      console.log('personCard', this.personCard);

      //如果我是包工头 那么我就显示劳工薪资 并且查询劳工薪资

    },
    beforeCreate() {},
    mounted() {}
  }
</script>


<style lang="scss">
  .null-box {
    margin-top: 140rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .showImage {
    background-color: #fff;
    padding: 30rpx;
    border-radius: 20rpx;
    width: 100%;
    height: 1212rpx;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    .mybot {
      position: absolute;
      bottom: 30rpx;
      left: 40rpx;
      width: 670rpx;
      background-color: #055DFE;
      font-size: 32rpx;
      font-weight: 400;
      color: white;
    }
  }


  .nav-head {
    font-size: 32rpx;
    display: flex;
    align-items: center;
  }

  .selector {
    padding-left: 20rpx;
    display: flex;

    text {
      font-size: 38rpx;
    }
  }

  .list {
    display: flex;
    flex-direction: column;
    margin-top: 24rpx;

    .item {
      height: 130rpx;
      background-color: #fff;
      border-radius: 20rpx;
      margin-left: 20rpx;
      margin-bottom: 20rpx;
      margin-right: 20rpx;

      padding: 20rpx;

      .top {
        display: flex;
        align-items: center;
        height: 70rpx;

        .icon {
          margin-left: 20rpx;
        }

        .text {
          padding-left: 10rpx;
          font-size: 26rpx;
          color: #7E8FAB;
        }

        .affirm {
          position: absolute;
          font-size: 28rpx;
          right: 0;
          margin-right: 40rpx;
          color: #bdbdbb;
        }

        .affirm-red {
          color: red;
        }
      }

      .bottom {
        height: 60rpx;
        display: flex;
        align-items: center;

        .money {
          color: #055DFE;
          margin-left: 50rpx;
        }

        .position {
          color: #7E8FAB;
          font-size: 28rpx;
          position: absolute;
          right: 0;
          margin-right: 40rpx;
        }
      }
    }
  }

  .nav {
    .title {
      font-size: 32rpx;
      color: #7E8FAB;
      margin-left: 20rpx;
    }

    .curr {
      font-weight: bold;
      color: black;
    }
  }
</style>
